<template>
  <div class="about-page">
    <blockquote class="breadcrumb" :style="linkStyle">
      <a href="/" title="网站首页">网站首页<span class="separator">&gt;</span></a>
      <a href="/about/" title="关于本站">关于本站<span class="separator">&gt;</span></a>
      <span class="active">{{ currentBreadcrumb }}</span>
    </blockquote>
    <div class="nav" :style="linkStyle">
      <router-link to="/about/introduce" active-class="active-link">本站介绍</router-link>
      <router-link to="/about/friendlinks" active-class="active-link">友情链接</router-link>
      <router-link to="/about/message" active-class="active-link">留言墙</router-link>
    </div>

    <router-view />
  </div>
</template>

<script setup>
const route = useRoute()

const linkStyle = computed(() => ({
  backgroundColor: route.path.includes('message') ? 'var(--about-bg-color, #f2f2f2)' : ''
}))

const currentBreadcrumb = computed(() => {
  if (route.path.includes('introduce')) {
    return '本站介绍'
  } else if (route.path.includes('friendlinks')) {
    return '友情链接'
  } else if (route.path.includes('message')) {
    return '留言墙'
  }
  return '本站介绍' // 默认值
})
</script>

<style scoped>
.about-page {
  padding: 20px;
  width: 64%;
  height: auto;
  margin: 10px auto;
}
.breadcrumb {
  width: calc(100% - 35px);
  background-color: var(--about-bg-color, #fff);
  color: var(--about-text-color, black);
  margin: 20px auto;
  padding: 10px 15px;
  border-left: 4px solid #5fb878;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}
.breadcrumb a {
  color: var(--about-text-color, black);
  text-decoration: none;
}
.separator {
  margin: 0 5px;
}
.nav {
  display: flex;
  width: 100%;
  justify-content: center;
  background-color: var(--about-bg-color, #fff);
  padding: 20px 0;
  text-align: center;
  /*居中*/
  margin: 0 auto;

  /*下边框*/
  border-bottom: 1px solid #5fb878;
  /*阴影*/
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav a {
  margin: 0 15px;
  text-decoration: none;
  color: var(--about-text-color, black);
}
.nav a.active-link {
  color: #5fb878;
  font-weight: bold;
  border-bottom: 2px solid #5fb878;
}
@media (max-width: 992px) {
  .about-page {
    width: 90%;
  }
}
</style>
